<template>
	<div class="avue-contail" :class="{'avue--collapse':isCollapse,}">
		<screenshot v-if="setting.screenshot"></screenshot>
		<!-- <setting></setting> -->
		<div class="avue-layout" :class="{'avue-layout--horizontal':isHorizontal}">
			<div class="avue-sidebar">
				<!-- 左侧导航栏 -->
				<logo />
				<sidebar />
			</div>
			<div class="avue-main">
				<!-- 顶部导航栏 -->
				<top ref="top" />
				<!-- 顶部标签卡 -->
				<tags />
				<!-- <transition name="fade-scale">
					<search class="avue-view" v-show="isSearch"></search>
				</transition> -->
				<!-- 主体视图层 -->
				<div style="flex:auto;overflow-y:auto;overflow-x:hidden;" id="avue-view" v-show="!isSearch">
					<keep-alive>
						<router-view class="avue-view" v-if="$route.meta.keepAlive && isRefresh" />
					</keep-alive>
					<router-view class="avue-view" v-if="!$route.meta.keepAlive && isRefresh" />
				</div>
				<div class="avue-footer">
					<p class="copyright">© 2018-2021 Ebyte</p>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import mqtt from 'mqtt'
	import tags from "./tags";
	import screenshot from './screenshot';
	import setting from './setting';
	import search from "./search";
	import logo from "./logo";
	import top from "./top/";
	import sidebar from "./sidebar/";
	import admin from "@/util/admin";

	import request from '@/router/axios';


	import {
		validatenull
	} from "@/util/validate";
	import {
		calcDate
	} from "@/util/date.js";
	import {
		getStore
	} from "@/util/store.js";
	import {
		baseUrl,
		MQTT_SERVICE,
		MQTT_USERNAME,
		MQTT_PASSWORD
	} from '@/config/env';
	var client;
	var clientId = Math.floor(Math.random() * (9999999 - 1000000) + 1000000)

	const options = {
		connectTimeout: 40000,
		clientId: "user" + clientId,
		username: MQTT_USERNAME,
		password: MQTT_PASSWORD,
		clean: true
	}
	export default {

		components: {
			top,
			logo,
			tags,
			search,
			sidebar,
			setting,
			screenshot
		},

		name: "index",
		provide() {
			return {
				index: this
			};
		},
		data() {
			return {
				client: {},
				//搜索控制
				isSearch: false,
				//刷新token锁
				refreshLock: false,
				//刷新token的时间
				refreshTime: "",
				ws: null,
				userInfo: [],
			};
		},
		created() {
			this.refreshToken();
		},
		mounted() {
			//this.websocket();
			this.init();
			this.getUserinfo();
		},
		computed: mapGetters(["isHorizontal", "setting", "isRefresh", "isLock", "isCollapse", "website",
			"menu"
		]),
		props: [],
		methods: {
			getUserinfo() {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + '/api/user/userinfo',
					})
					.then(function(response) {
						if (response.data.status == 0) {
							that.$message.error(response.data.info)
						} else if (response.data.status == 1) {
							that.userInfo = response.data.data;
							// mqtt连接

							that.mqttMSG();
						}
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
			},

			mqttMSG() {
				let that = this;
				console.log("准备连接MQTT");
				if (!mqtt.connected) {
					client = mqtt.connect(MQTT_SERVICE, options)
				}
				client.on('connect', (e) => {
					console.log('连接成功:')
					client.subscribe('user/' + that.userInfo.id, {
						qos: 1
					}, (error) => {
						if (!error) {
							console.log('订阅成功')
						} else {
							console.log('订阅失败')
						}
					})
				})
				// 接收消息处理
				client.on('message', (topic, message) => {
					var data = JSON.parse(message)
					if (data.type == 'disconnect') {

						this.$notify({
							title: '设备离线',
							message: "设备ID:" + data.id + " 已离线",
							type: 'error',
							duration: 0
						});
					}
					if (data.type == 'connect') {
						this.$notify({
							title: '设备上线',
							message: "设备ID:" + data.id + " 已上线",
							type: 'success',
							duration: 0
						});
					}
				})
				// 断开发起重连
				client.on('reconnect', (error) => {
					console.log('正在重连:', error)
				})
				// 链接异常处理
				client.on('error', (error) => {
					console.log('连接失败:', error)
				})
			},
			// 屏幕检测
			init() {
				this.$store.commit("SET_SCREEN", admin.getScreen());
				window.onresize = () => {
					setTimeout(() => {
						this.$store.commit("SET_SCREEN", admin.getScreen());
					}, 0);
				};
			},
			//打开菜单
			openMenu(item = {}) {
				this.$store.dispatch("GetMenu", item.parentId).then(data => {
					if (data.length !== 0) {
						this.$router.$avueRouter.formatRoutes(data, true);
					}
					//当点击顶部菜单做的事件
					if (!validatenull(item)) {
						let itemActive = {},
							childItemActive = 0;
						//vue-router路由
						if (item.path) {
							itemActive = item;
						} else {
							if (this.menu[childItemActive].length == 0) {
								itemActive = this.menu[childItemActive];
							} else {
								itemActive = this.menu[childItemActive].children[childItemActive];
							}
						}
						this.$store.commit('SET_MENUID', item);
						this.$router.push({
							path: this.$router.$avueRouter.getPath({
								name: itemActive.label,
								src: itemActive.path
							}, itemActive.meta)
						});
					}

				});
			},
			// 10分钟检测一次token
			refreshToken() {
				this.refreshTime = setInterval(() => {
					const token = getStore({
						name: "token",
						debug: true
					}) || {};
					const date = calcDate(token.datetime, new Date().getTime());
					if (validatenull(date)) return;
					if (date.seconds >= this.website.tokenTime && !this.refreshLock) {
						this.refreshLock = true;
						this.$store
							.dispatch("RefeshToken")
							.then(() => {
								this.refreshLock = false;
							})
							.catch(() => {
								this.refreshLock = false;
							});
					}
				}, 1000);
			},
		}
	};
</script>
